<template>
  <div>

    <!--  返回大屏  -->
    <a
        @click="backToScreen"
        style="float: left"
        class="backToScreenA"
    >
      <i
          class="el-icon-monitor backToScreenStyle"
      ></i>
      <span class="backToScreenStyle">返回大屏</span>
    </a>

    <!--  缩放导航  -->
    <a
        @click="menuCollapse"
        style="float: left">
      <i
          :class="{'el-icon-s-unfold':!collapseFlag,'el-icon-s-fold':collapseFlag,'collapseIcon':true}"
      ></i>
    </a>
    <router-view
        style="float: left;margin-left: 2vw"
        @tabChanged="tabChanged"
        name="tabs"></router-view>
    <!--  页面标题  -->
  </div>
</template>

<script>

export default {
  methods: {
    // -------------- 功能 --------------------

    /**
     * 折叠导航栏
     */
    menuCollapse: function () {
      this.$emit("menuCollapse")
    },

    /**
     * 返回大屏
     */
    backToScreen: function () {
      this.$emit("backToScreen")
    },

    /**
     * 标签页变化
     * @param val
     */
    tabChanged: function (val) {
      this.$emit("tabChanged", val)
    }
  },
  props: {
    collapseFlag: {
      type: Boolean,
      default: false
    },
    currOptionNum: {
      type: Number,
      default: 2
    }
  },
  computed: {
    title: function () {
      let title = "";
      switch (this.currOptionNum) {
        case 1:
          title = "大数据分析";
          break;
        case 2:
          title = "黑广播查询";
          break;
        case 3:
          title = "工作管理";
          break;
        case 4:
          title = "控制中心";
          break;
        default:
          break;
      }
      return title
    }
  }
}
</script>

<style>

.collapseIcon {
  font-size: 20px;
  line-height: 2vh;
}

.collapseIcon:hover {
  transform: translate(5px)
}

.backToScreenStyle {
  line-height: 2vh;
  font-size: 20px;
  color: rgb(78, 63, 230);
  margin-right: 1.5vw;
}

/*.backToScreenStyle:hover {*/
/*  transform: translate(5px)*/
/*}*/
.title {
  font-size: 25px;
  position: absolute;
  left: 45vw;
}

.backToScreenA:hover {
  transform: scale(1.1, 1.1)
}
</style>